import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createHashRouter } from "react-router-dom";
import App from "./App";
import AppProvider from "./components/AppProvider";
import ProtectedRoute from "./components/ProtectedRoute";
import "./index.scss";
import Home from "./pages/home";
import Doctors from "./pages/home/doctors";
import Illness from "./pages/home/illness";
import Lecture from "./pages/home/lecture";
import Medicine from "./pages/home/medicine";
import Pay from "./pages/home/pay";
import Quiz from "./pages/home/quiz";
import Quiz2 from "./pages/user/quiz";
import List from "./pages/list";
import Detail from "./pages/list/detail";
import Login from "./pages/login";
import Reg from "./pages/reg";
import DocsPage from "./pages/shop-cart";
import ShopCart from "./pages/shop-cart";
import User from "./pages/user";
import ModifyUser from "./pages/user/modify-user";

const router = createHashRouter([
  {
    path: "/list/:id",
    element: <Detail />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/reg",
    element: <Reg />,
  },
  {
    path: "/home/doctors",
    element: <Doctors />,
  },
  {
    path: "/home/illness",
    element: <Illness />,
  },
  {
    path: "/home/lecture",
    element: <Lecture />,
  },
  {
    path: "/home/medicine",
    element: <Medicine />,
  },
  {
    path: "/home/quiz",
    element: <Quiz />,
  },
  {
    path: "/home/pay",
    element: <Pay />,
  },
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "list",
        element: <List />,
      },
      {
        path: "user",
        element: (
          <ProtectedRoute>
            <User />
          </ProtectedRoute>
        ),
      },
      {
        path: "user/quiz",
        element: <Quiz2 />,
      },
      {
        path: "user/modify-user",
        element: <ModifyUser />,
      },
      {
        path: "shop_cart",
        element: <DocsPage />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <AppProvider>
    <RouterProvider router={router}></RouterProvider>
  </AppProvider>
);
